<template>
  <div class="home">
      <header class="home-header wrap" :class="{'active' : headerScroll}">
          <router-link to="./category">
          <i class="iconfont icon-caidan"></i>
          </router-link>
          <div class="header-search">
              <span class="app-name">新锋商城</span>
              <i class="iconfont icon-sousuo"></i>
              <span class="search-title">
                  <router-link to="./product-list?from=home">
                      山河无恙，人间皆安
                  </router-link>
              </span>
          </div>
          <span class="login" v-if="!isLogin">
              <router-link to="./login">登录</router-link>
          </span>
          <span class="user" v-else>
              <router-link to="./user">
                <van-icon name="manager-o"/>
              </router-link>
          </span>
      </header>
      <Swiper :list="swiperList"></Swiper>
      <div class="category-list">
        <div>
          <img src="http://s.weituibao.com/1583585285461/cs.png" alt="">
          <span>新峰超市</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285468/fs.png" alt="">
          <span>新峰服饰</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285470/qq.png" alt="">
          <span>全球购</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285472/sx.png" alt="">
          <span>新峰生鲜</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285467/dj.png" alt="">
          <span>新峰到家</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285465/cz.png" alt="">
          <span>充值缴费</span>
        </div>
        <div>
          <img src="	http://s.weituibao.com/1583585285469/pt.png" alt="">
          <span>9.9元拼</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285468/juan.png" alt="">
          <span>领券</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285471/sq.png" alt="">
          <span>省钱</span>
        </div>
        <div>
          <img src="http://s.weituibao.com/1583585285470/qb.png" alt="">
          <span>全部</span>
        </div>
      </div>
      <div class="good">
        <header class="good-header">{{goodNewsData.kind}}</header>
          <div class="good-box">
            <div class="good-item" v-for="item, index in goodNewsData.goodNewsItem" :key="index" @click="goToDetail(item)">
              <img :src="item.image">
              <div class="good-info">
                <p class="name">{{item.goods_name}}</p>
                <p class="subtitle">{{item.introduce}}</p>
                <span class="price">￥{{item.price}}</span>
              </div> 
            </div>
          </div>
      </div>
      <div class="good">
        <header class="good-header">{{goodRecommendData.kind}}</header>
          <div class="good-box">
            <div class="good-item" v-for="item, index in goodRecommendData.goodRecommendItem" :key="index" @click="goToDetail(item)">
              <img :src="item.image">
              <div class="good-info">
                <p class="name">{{item.goods_name}}</p>
                <p class="subtitle">{{item.introduce}}</p>
                <span class="price">￥{{item.price}}</span>
              </div> 
            </div>
          </div>
      </div>
      <div class="good">
        <header class="good-header">{{goodHotsData.kind}}</header>
          <div class="good-box">
            <div class="good-item" v-for="item, index in goodHotsData.goodHotsItem" :key="index" @click="goToDetail(item)">
              <img :src="item.image">
              <div class="good-info">
                <p class="name">{{item.goods_name}}</p>
                <p class="subtitle">{{item.introduce}}</p>
                <span class="price">￥{{item.price}}</span>
              </div> 
            </div>
          </div>
      </div>
  </div>
</template>
<script lang="ts" setup>
import Swiper from '../components/Swiper.vue'
import { useRouter } from 'vue-router'
import { onMounted, ref, reactive } from 'vue'
import { getLocal } from '../common/ts/util.ts'
import { Toast } from 'vant'
import { getNewGoods, getRecommendGoods, getHotGoods, getCarouselData } from '@/service/home.ts'
interface GoodsItem {
  goods_id: number,
  goods_name: string, 
  introduce: string, 
  price: number, 
  image: string
}
const router = useRouter()
const isLogin = ref(false)
const swiperList = ref()
const headerScroll = ref(false)
const goodNewsData = reactive({
  kind:'',
  goodNewsItem:[] as GoodsItem[]
})
const goodRecommendData = reactive({
  kind:'',
  goodRecommendItem:[] as GoodsItem[]
})
const goodHotsData = reactive({
  kind:'',
  goodHotsItem:[] as GoodsItem[]
})
function goToDetail (value :any) {
  router.push({
    name:'product',
    params:{
      id:value.goods_id
    }
  })
}
function pageScroll () {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  scrollTop > 100 ? headerScroll.value = true : headerScroll.value = false
}
async function getCarouselDataResult(count:number){
  const result = await getCarouselData(count)
  console.log('carousel',result.data.imgs)
  swiperList.value = result.data.imgs
}
async function getNewGoodsResult (params :any) {
  const result = await getNewGoods(params)
  console.log(result.data.KindGoods)
  goodNewsData.goodNewsItem = result.data.KindGoods
  goodNewsData.kind = result.data.kind
}
async function getRecommendGoodsResult (params :any) {
  const result = await getRecommendGoods(params)
  console.log('Recommend',result.data)
  goodRecommendData.goodRecommendItem = result.data.KindGoods
  goodRecommendData.kind = result.data.kind
}
async function getHotGoodsResult (params :any) {
  const result = await getHotGoods(params)
  console.log(result.data.KindGoods)
  goodHotsData.goodHotsItem = result.data.KindGoods
  goodHotsData.kind = result.data.kind
}
onMounted(() => {
  const token = getLocal('token')
  if (token) {
    isLogin.value = true
  }
  Toast.loading({
    message: '加载中...',
    forbidClick: true
  })
  console.log('###')
  getCarouselDataResult(3)
  getNewGoodsResult({
  "page": 1,
  "size": 6
  })
  getRecommendGoodsResult({
    "page": 1,
    "size": 6
  })
  getHotGoodsResult({
    "page": 1,
    "size": 6
  })
  Toast.clear()
  window.addEventListener('scroll', pageScroll)
})
</script> 

<style lang="less" scoped>
@import '../common/style/mixin.less';
.home{
  .home-header{
      position: fixed;
      left: 0;
      top: 0;
      .wh(100%,50px);
      .fj();
      line-height:50px;
      padding: 0 15px;
      .boxSizing();
      font-size: 15px;
      color:#fff;
      z-index: 10000;
      .icon-caidan{
          color:@primary;
          font-size:20px;
      }
      .van-icon{
        color:@primary;
        font-size: 20px;
      }
      &.active {
          background: @primary;
          .icon-caidan {
              color: #fff;
          }
          .van-icon{
            color:#fff;
          }
          .login {
          color: #fff;
          }
      }
      .header-search {
          display: flex;
          .wh(74%, 20px);
          line-height: 20px;
          margin: 10px 0;
          padding: 5px 0;
          color: #232326;
          background: rgba(255, 255, 255, 0.7);
          border-radius: 20px;
          .app-name {
              padding: 0 10px;
              color: @primary;
              font-size: 20px;
              font-weight: bold;
              border-right: 1px solid #666;
          }
          .icon-sousuo {
          padding: 0 10px;
          font-size: 17px;
          }
          .search-title {
              font-size: 12px;
              color: #666;
              line-height: 21px;
          }
      }
      .login {
          color: @primary;
          line-height: 52px;
          .van-icon-manager-o {
              font-size: 20px;
              vertical-align: -3px;
          }
      }
  }
  .category-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 13px;
    div {
      display: flex;
      flex-direction: column;
      width: 20%;
      text-align: center;
      img {
        .wh(40px, 40px);
        margin: 13px auto 8px auto;
      }
      span{
        font-size:15px
      }
    }
  }
  .good{
    .good-header{
      background: #f9f9f9;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: @primary;
      font-size: 16px;
      font-weight: 500;
    }
    .good-box{
      .fj(flex-start);
      flex-wrap:wrap;
      .good-item{
        width:49%;
        padding:10px 0;
        border-bottom: 1px solid #dcdcdc;
        border-right: 1px solid #dcdcdc;
        img{
          width:100%;
          height:200px;
          object-fit: contain;
          padding:0 10px;
          .boxSizing();
          overflow: hidden
        }
        .good-info{
          .wh(100%,120px);
          text-align:center;
          padding:5px;
          .boxSizing();
          p{
            margin:0;
          }
          .name {
          width: 100%;
          max-height: 40px;
          line-height: 20px;
          font-size: 15px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          }
          .subtitle {
            width: 100%;
            max-height: 20px;
            line-height: 25px;
            font-size: 13px;
            color: #999;
            overflow: hidden;
          }
          .price {
            color: @primary;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>